<template>
 <div>
  <div></div>
  <div>
    <el-button size="mini" type="primary" @click="addCategoryDialog">添加</el-button>
  </div>
<el-row>
<el-col :span="24" >
  <el-table
      :data="category"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      
      <el-table-column
        label="图片"
        width="180">
        <template v-slot="scope3">
                    <img
                    style="width: 100px;  height: 100px"
                    :src= "scope3.row.img"
                    alt=""
                    >
                    <img>
                    </template>
      </el-table-column>
   
      <el-table-column
        prop="title"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="online"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述">
      </el-table-column>
      <el-table-column
        prop="handle"
        label="操作">
        <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="jumpCategory(scope.row.id)">子分类  </el-button>
        <el-button size="mini" type="danger" @click="delCategoryDialog(scope.row.id)">删除</el-button>
        <el-button size="mini" type="info" @click="editCategoryDialog(scope.row.id)">编辑</el-button>
      </template>
      </el-table-column>
    
    </el-table>
    <el-pagination
            style="margin-top: 12px"
            background
            layout="prev, pager, next"
            :page-size="5"
            :current-page="current"
            @current-change="goto"
            :total="total"
          >
          </el-pagination>
    <add-category-dialog @refresh="refresh" ref="addDialog"></add-category-dialog>
    <edit-category-dialog @refresh="refresh" ref="editDialog"></edit-category-dialog>
</el-col>


</el-row>

 </div>
</template>
    
<script>
  import http from '@/utils/request.js'
  import AddCategoryDialog from './AddCategoryDialog.vue'
  import EditCategoryDialog from './EditCategoryDialog.vue'


    export default {
      components:{
        AddCategoryDialog,
        EditCategoryDialog
        // DelDeptDialog
      },
      data() {
        return{
   
          category: [],
          current: 1,
          total: 0,
          page: 1,
          cpage: this.current
          
        }
      },

   mounted(){
    // this.showDept();
    
    // this.initCategoryData();
    this.goto(localStorage.getItem('page'));
    
    
    },
    methods: {
      initCategoryData(){
        this.goto(this.current);
      //   localStorage.setItem('page',1)
      //   console.log("local--->",localStorage.getItem('page'));
      //   http.get(`/category/show/${localStorage.getItem('page')}`).then((res)=>{
      //   this.category = res.data
      //   this.total = res.total
      //   this.current = res.current  
      //   console.log("category-show-res----------->>",res);
      //   console.log("res: -------->",res);
      // },)


      },
      goto(val) {
        if(val == undefined || val == null){
          // localStorage.setItem("page",1);
          this.showDept(1);

        }
        else{
          this.showDept(val);

        }
      
    },

    showDept(val){
      localStorage.setItem('page',val)
      // this.page = localStorage.getItem('page')

      http.get(`/category/show/${localStorage.getItem('page')}`).then((res)=>{
        this.category = res.data
        this.total = res.total
        this.current = res.current  
        console.log("category-show-res----------->>",res);
        console.log("res: -------->",res);
      },)
    },
    jumpCategory(id){

      console.log("父路由传过来的id：",id);
      const subID = JSON.stringify(id);
      localStorage.setItem('cid',subID)
      const cpage = JSON.stringify(this.current);
      localStorage.setItem('page',cpage)
      console.log("json转换后的id：",subID,cpage);
      localStorage.setItem('page',cpage)



      this.showDept(cpage)
      // this.current = 
      this.$router.push({
            path:"/category/sub-category",
            query:{
            	id:subID,
              cpage:this.current
            }
        })
      
    },
    async delCategoryDialog(id){
      // this.$refs.delDialog.delDeptDialogVisible = true
      console.log("id的值-------------------》》",id);
      try {
        // 对于this.confirm() 使用 await等待的时候，用户点击取消，是通过抛异常的方式
        await this.$confirm("你确定要删除这条数据吗?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          type: "success",
        });
        // 代码如果能够走下来表示用户点击了确认按钮
        // 删除用户
        await http.delete(`category/${id}`);
        this.$message({ message: "删除成功", type: "success", duration: 1000 });
        this.refresh();
      } catch (err) {
        // 代码如果进入了 catch块，表示用户点击了取消按钮
        console.log(err);
      }
      this.goto(this.current);
      
    },

       // 用户点击编辑按钮
      editCategoryDialog(id) {
      console.log("edit---------->id",id);
      this.$refs.editDialog.getById(id);
      // 让编辑模态框展示
      this.$refs.editDialog.editCategoryDialogVisible = true
    },
    async addCategoryDialog() {
       this.$refs.addDialog.addCategoryDialogVisible = true
      this.refresh();
      // this.showDept();
    },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      refresh(){

        this.goto(this.current);

      }
    
     
    }
  }
  </script>
    
    <style>
    
    </style>
    